<!DOCTYPE html>
<html>
<head>
    <title>我的网盘</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        /* 弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s linear 0.25s, opacity 0.25s;
        }
        
        .modal-overlay.active {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
        }
        
        .modal {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 0.5rem;
        }
        
        .modal-title {
            margin: 0;
            font-size: 1.25rem;
            color: #333;
        }
        
        .close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #777;
        }
        
        .modal-body {
            margin-bottom: 1.5rem;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="container header-content">
            <a href="{{ url_for('dashboard') }}" class="logo">云存储网盘</a>
            <div class="nav-links">
                <span>欢迎, {{ session.email }}</span>
                {% if is_admin %}
                    <a href="{{ url_for('admin_panel') }}">管理员面板</a>
                {% endif %}
                <a href="{{ url_for('logout') }}">退出登录</a>
            </div>
        </div>
    </header>
    
    <div class="container dashboard">
        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            {% for category, message in messages %}
              <div class="flash-messages flash-{{ category }}">
                {{ message }}
              </div>
            {% endfor %}
          {% endif %}
        {% endwith %}
        
        <!-- 搜索栏 -->
        <div class="search-bar">
            <form action="{{ url_for('search_files') }}" method="get" class="search-form">
                <input type="text" name="query" class="search-input" placeholder="搜索文件或文件夹..." 
                       value="{{ search_query if search_query else '' }}">
                <button type="submit" class="btn search-btn">
                    <i class="fas fa-search"></i> 搜索
                </button>
            </form>
        </div>
        
        <!-- 存储信息 -->
        <div class="storage-info">
            <h3>存储空间</h3>
            <div class="storage-bar-container">
                <div class="storage-bar {{ storage_status }}" style="width: {{ usage_percent }}%"></div>
            </div>
            <div class="storage-text">
                <span>已使用: {{ storage_used }}</span>
                <span>总空间: {{ storage_limit }}</span>
            </div>
        </div>
        
        <!-- 上传区域 -->
        <div class="upload-area">
            <i class="fas fa-cloud-upload-alt" style="font-size: 2rem; color: #3498db;"></i>
            <h3>
                上传文件到 {% if current_folder %} "{{ current_folder.name }}" {% else %} 根目录 {% endif %}
            </h3>
            <p>
                支持最大 {{ format_size(max_content_length) }} 的文件，
                {% if not current_folder %}
                    支持上传单文件、文件夹（可多层嵌套）。
                {% else %}
                    仅支持上传单文件。
                {% endif %}
            </p>
            <form method="post" action="{{ url_for('upload_file') }}" enctype="multipart/form-data" class="upload-form" style="margin-bottom: 1rem;">
                <input type="hidden" name="folder_id" value="{{ current_folder.id if current_folder else '' }}">
                <input type="file" name="file" required style="margin-bottom: 1rem;">
                <button type="submit" class="btn">
                    <i class="fas fa-upload"></i> 上传文件
                </button>
            </form>
            {% if not current_folder %}
            <form method="post" action="{{ url_for('upload_file') }}" enctype="multipart/form-data" class="upload-form">
                <input type="hidden" name="folder_id" value="">
                <input type="hidden" name="upload_type" value="folder">
                <input type="file" name="file" webkitdirectory directory multiple required style="margin-bottom: 1rem;">
                <button type="submit" class="btn btn-success">
                    <i class="fas fa-folder-plus"></i> 上传文件夹
                </button>
            </form>
            {% endif %}
        </div>
        
        <!-- 文件夹操作 -->
        <div class="files-section">
            <div class="section-header">
                <h3 class="section-title">
                    <i class="fas fa-folder-open"></i> 文件夹
                </h3>
                <!-- 创建文件夹按钮 - 打开弹窗 -->
                <button id="createFolderBtn" class="btn btn-success">
                    <i class="fas fa-plus"></i> 创建文件夹
                </button>
            </div>
            {% if folder_path %}
            <div style="padding: 1rem 1.5rem; border-bottom: 1px solid #eee; font-size: 0.9rem;">
                <a href="{{ url_for('dashboard') }}">根目录</a>
                {% for folder in folder_path %}
                    {% if loop.last %}
                        / {{ folder.name }}
                    {% else %}
                        / <a href="{{ url_for('dashboard', folder_id=folder.id) }}">{{ folder.name }}</a>
                    {% endif %}
                {% endfor %}
            </div>
            {% endif %}
            {% if folders %}
            <table class="file-table">
                <tr>
                    <th>文件夹名称</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                {% for folder in folders %}
                <tr>
                    <td>
                        <i class="fas fa-folder file-icon"></i>
                        <a href="{{ url_for('dashboard', folder_id=folder.id) }}">{{ folder.name }}</a>
                    </td>
                    <td>{{ folder.created_at }}</td>
                    <td>
                        <a href="{{ url_for('download_folder', folder_id=folder.id) }}">
                            <button type="button" class="btn action-btn btn-info">
                                <i class="fas fa-file-archive"></i> 下载压缩包
                            </button>
                        </a>
                        <form method="post" action="{{ url_for('delete_folder', folder_id=folder.id) }}" style="display: inline;">
                            <button type="submit" class="btn btn-danger action-btn" onclick="return confirm('确定要删除此文件夹及其所有内容吗?')">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </table>
            {% else %}
            <div style="padding: 2rem; text-align: center; color: #777;">
                没有文件夹
            </div>
            {% endif %}
        </div>
        
        <!-- 文件列表 -->
        <div class="files-section" style="margin-top: 1.5rem;">
            <div class="section-header">
                <h3 class="section-title">
                    <i class="fas fa-file"></i> 文件
                    {% if search_query %}
                        (搜索结果: "{{ search_query }}")
                    {% endif %}
                </h3>
            </div>
            
            {% if files %}
            <table class="file-table">
                <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>上传时间</th>
                    <th>操作</th>
                </tr>
                {% for file in files %}
                <tr>
                    <td>
                        <i class="fas fa-file file-icon"></i>
                        {{ file.filename }}
                    </td>
                    <td>{{ file.formatted_size }}</td>
                    <td>{{ file.upload_time }}</td>
                    <td>
                        <a href="{{ url_for('download_file', file_id=file.id) }}">
                            <button class="btn action-btn">
                                <i class="fas fa-download"></i> 下载
                            </button>
                        </a>
                        <form method="post" action="{{ url_for('delete_file', file_id=file.id) }}" style="display: inline;">
                            <button type="submit" class="btn btn-danger action-btn" onclick="return confirm('确定要删除吗?')">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </table>
            {% else %}
            <div style="padding: 2rem; text-align: center; color: #777;">
                没有文件
            </div>
            {% endif %}
        </div>
    </div>
    
    <!-- 创建文件夹弹窗 -->
    <div id="createFolderModal" class="modal-overlay">
        <div class="modal">
            <div class="modal-header">
                <h2 class="modal-title">创建新文件夹</h2>
                <button class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <form id="createFolderForm" method="post" action="{{ url_for('create_folder') }}">
                    <input type="hidden" name="parent_id" value="{{ current_folder.id if current_folder else '' }}">
                    <div style="margin-bottom: 1rem;">
                        <label for="folder_name" style="display: block; margin-bottom: 0.5rem;">文件夹名称</label>
                        <input type="text" id="folder_name" name="folder_name" placeholder="请输入文件夹名称" 
                               required style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px;">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary close-modal">取消</button>
                        <button type="submit" class="btn btn-success">创建</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const modal = document.getElementById('createFolderModal');
        const createFolderBtn = document.getElementById('createFolderBtn');
        const closeBtn = document.querySelector('.close-btn');
        const closeModalBtn = document.querySelector('.close-modal');
        
        // 打开弹窗
        createFolderBtn.addEventListener('click', () => {
            modal.classList.add('active');
            // 自动聚焦到输入框
            document.getElementById('folder_name').focus();
        });
        
        // 关闭弹窗的函数
        function closeModal() {
            modal.classList.remove('active');
        }
        
        // 点击关闭按钮关闭弹窗
        closeBtn.addEventListener('click', closeModal);
        closeModalBtn.addEventListener('click', closeModal);
        
        // 点击弹窗外部关闭弹窗
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                closeModal();
            }
        });
        
        // 按ESC键关闭弹窗
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && modal.classList.contains('active')) {
                closeModal();
            }
        });
    </script>
</body>
</html>